/// <reference path="references.scss" />

// Mixins
// ========================================================================

@mixin bg-color-vars($state) {
    --bg-color: var(--#{$state});
    --bg-color-rgb: var(--#{$state}-rgb);
}

@mixin center($xy: xy) {
    @if $xy == xy {
        inset-inline-start: 50%;
        top: 50%;
        bottom: auto;
        inset-inline-end: auto;
        transform: translateX(-50%) translateY(-50%);
    }
    @else if $xy == x {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        transform: translateX(-50%);
    }
    @else if $xy == y {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

@mixin bubble($direction: "left", $alignment: "near", $size: 10, $background: #fff, $border: $card-border-color, $offset: 24px) {
    // defaults for direction = left
    $inset: "inline-start";
    $elemAlignment: "inline-end";
    $firstBorder: "block-start";
    $secondBorder: "block-end";

    @if $direction == "right" {
        $inset: "inline-end";
        $elemAlignment: "inline-start";
    } 
    @else if $direction == "top" {
        $inset: "block-start";
        $elemAlignment: "block-end";
        $firstBorder: "inline-start";
        $secondBorder: "inline-end";
    } 
    @else if $direction == "bottom" {
        $inset: "block-end";
        $elemAlignment: "block-start";
        $firstBorder: "inline-start";
        $secondBorder: "inline-end";
    }

    --bubble-size: #{$size}px;
    --bubble-width: var(--bubble-size);
    --bubble-offset: #{$offset};
    --bubble-bg: #{$background};
    --bubble-border-color: #{$border};

    &:before, &:after {
        content: '' !important;
        display: inline-block;
        position: absolute;
    }

    &:before {
        border-#{$firstBorder}: var(--bubble-width) solid transparent;
        border-#{$secondBorder}: var(--bubble-width) solid transparent;
        border-#{$elemAlignment}: var(--bubble-width) solid var(--bubble-border-color);
        //border-#{$elemAlignment}-color: rgba(0, 0, 0, 0.2);
        inset-#{$inset}: calc(var(--bubble-width) * -1);

        @if $alignment == "near" {
            inset-#{$firstBorder}: var(--bubble-offset);
        } 
        @else if $alignment == "center" {
            inset-#{$firstBorder}: 50%;
            margin-#{$firstBorder}: calc((var(--bubble-width) + 1px) * -1);
        } 
        @else if $alignment == "far" {
            inset-#{$secondBorder}: var(--bubble-offset);
        }
    }

    &:after {
        --bubble-width: calc(var(--bubble-size) - 1px);
        border-#{$firstBorder}: var(--bubble-width) solid transparent;
        border-#{$secondBorder}: var(--bubble-width) solid transparent;
        border-#{$elemAlignment}: var(--bubble-width) solid var(--bubble-bg);
        inset-#{$inset}: calc(var(--bubble-width) * -1);

        @if $alignment == "near" {
            inset-#{$firstBorder}: calc(var(--bubble-offset) + 1px);
        } @else if $alignment == "center" {
            inset-#{$firstBorder}: 50%;
            margin-#{$firstBorder}: calc(var(--bubble-size) * -1);
        } @else if $alignment == "far" {
            inset-#{$secondBorder}: calc(var(--bubble-offset) + 1px);
        }
    }
}

@mixin fontastic($content, $size: 20px) {
    display: inline-block;
    font: normal normal normal 16px/1 'fontastic';
    font-size: $size;
    speak: none;
    text-transform: none;
    content: $content;
}

@mixin fontawesome($content, $size: $icon-font-size-base, $variant: $icon-font-variant-default) {
    // Copied over from FA's core stylesheet. We don't want to customize the FA core.
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    width: 1.25em;

    font-size: $size;
    @include fontawesome-font($content, $variant);
}

@mixin fontawesome-font($content, $variant: $icon-font-variant-default) {
    @if $fa-use-pro == false and $variant == "light" {
        $variant: regular;
    }
    
    @if $fa-use-pro == false and $variant == "regular" {
        @if not(map-has-key($fa-free-regular-icons, $content)) {
            $variant: solid;
        }
    }

    @if $variant == "brand" {
        font-family: $fa-font-family-brands;
        font-weight: 400;
    }
    @else {
        font-weight: map-get($icon-font-variants, $variant);
        @if $fa-use-pro {
            font-family: $fa-font-family-pro;
        }
        @else {
            font-family: $fa-font-family-free;
        }
    }

    content: $content;
}

@mixin active-list-item($size: 4px, $color: theme-color("warning")) {
    position: absolute;
    display: block;
    content: ' ';
    inset-inline-start: -1px;
    top: -1px;
    bottom: -1px;
    width: $size;
    background: $color;
}

@mixin font-inherit() {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	color: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
}

@mixin smaller() {
    font-size: $font-size-sm !important;
}

@mixin button-flat() {
    --btn-color: #{$yiq-text-dark};
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: none;
    --btn-disabled-color: var(--btn-color);
    --btn-disabled-bg: var(--btn-bg);
    --btn-disabled-border-color: var(--btn-border-color);

    border-radius: var(--btn-border-radius);
    background-image: none;
}

@mixin trailing-action(
    $size: 1.25rem, 
    $bg: var(--gray-200), 
    $color: inherit,
    $hover-bg: var(--gray-600), 
    $hover-color: #fff,
    $active-bg: var(--gray-700), 
    $active-color: $hover-color,
    $border-radius: 50%
) {
    --trailing-action-size: #{$size};

    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--trailing-action-size);
    min-width: var(--trailing-action-size);
    height: var(--trailing-action-size);
    line-height: var(--trailing-action-size);
    background-color: $bg;
    color: $color;
    cursor: pointer;
    font-weight: $font-weight-medium;
    border-radius: $border-radius;
    border: 0;
    transition: $btn-transition;

    &:hover {
        color: $hover-color;
        background-color: $hover-bg;
    }

    &:active {
        color: $active-color;
        background-color: $active-bg;
    }
}

@mixin input-clear($size: 1.25rem) {
    @include trailing-action($size);
    --input-clear-size: #{$size};
}

@mixin matches-any($selectors...) {
    // join with comma + space
    $list: join($selectors, ", ");
    #{":is"}(#{$list}) {
        @content;
    }
}